<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" deferredSyntaxAllowedAsLiteral="true"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/layui/css/layui.css">
  <title>User List</title>
</head>
<body>
<div class="layui-form-item">
  <div class="layui-inline">
    <label class="layui-form-label">歌手：</label>
    <div class="layui-input-inline">
      <input type="text" id="name" name="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-inline">
    <div class="layui-input-inline">
      <button id="btn_search" type="button" class="layui-btn layui-btn-normal">
        <i class="layui-icon layui-icon-search"></i>
        查询
      </button>
      <button id="btn_add" type="button" class="layui-btn" lay-event="add">新增</button>
    </div>
  </div>
</div>

<div class="container mt-5">
  <table class="layui-hide" id="tbl_user"lay-filter="test"></table>
</div>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/layui/layui.js"></script>
<script>
  let table, $, layer;
  let row;

  layui.use(['table','jquery','layer'], function(){
    table = layui.table
            ,layer=layui.layer
            ,$=layui.jquery;
    //1.初始化列表
    initTable();
    //为查询按钮设置点击事件
    $("#btn_search").click(function(){
      query();
    })
    //为新增按钮设置点击事件
    $("#btn_add").click(function(){
      row=null;
      add('新增');
    })
  });
  //查询的点击事件
  function query(){
    let param = {
      'name': $("#name").val(),
    }
    //表格的重载
    table.reload('tbl_user', {
      url: '../singer/select', // 修改为后端处理查询的接口地址
      where: {
        name:param.name,
      },
      page: {
        curr: 1 // 重新加载第一页
      },
    });
  }
  //新增/修改的点击事件
  function add(title){
    layer.open({
      type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
      title: title,
      area: ['660px', '460px'],   //宽高
      skin: 'layui-layer-rim',    //样式类名
      content:  '../singer/insertInit', //书本编辑页面
      btn:['保存','关闭'],
      yes: function(index, layero){
        //调用子页面中提供的getData方法，快速获取子页面的form表单数据
        let data= $(layero).find("iframe")[0].contentWindow.getData();
        console.log(data);
        $.post('../singer/insertInit',
                data,function(rs){
                  if(rs.code==="0"){
                    //关闭对话框
                    layer.closeAll();
                    //调用查询方法刷新数据
                    query();
                  }else{
                    layer.msg("保存失败！");
                  }
                },'json');
      },
      btn2: function(index, layero){
        layer.closeAll();
      }
    });
  }
  function initTable(){
    table.render({
      elem: '#tbl_user'
      ,url:'../singer'
      ,method: 'get'
      //,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,defaultToolbar: ['filter', 'exports', 'print']
      ,request: {
        pageName: 'page', // 页码的参数名称，默认：page
        limitName: 'size', // 每页数据条数的参数名，默认：limit
        sort: 'sort'
      }
      ,title: '歌手数据表'
      ,cols: [[
        {type: 'numbers', title:'序号', fixed: 'left', sort: true}
        ,{field: 'pic', title: '头像', templet: function(res) {
            return '<img src="../singer/showPic/' + res.pic + '" class="layui-nav-img"/>';
          }}
        ,{field:'name', title:'歌手'}
        ,{field:'age', title:'年龄'}
        ,{field:'phone', title:'联系方式'}
        ,{field:'sex', title:'性别', templet: function(res){
            if(res.sex == "0")
              return '女';
            else
              return '男';
          }}
        ,{field:'motto', title:'座右铭'}
        ,{field:'singerinfo', title:'信息'}
        ,{field: 'registertime', title: '注册时间', templet: function(d){
            var date = new Date(d.registertime);
            var formattedTime = layui.util.toDateString(date, 'yyyy-MM-dd HH:mm:ss');
            return formattedTime;
          }}
        ,{fixed: 'right', title:'操作', align:'center', toolbar: '#barDemo',
          templet:function(){
            var str = '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger ">删除</button>';
            str += '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal ">修改</button>';
            return str;
          }
        }
      ]]
      ,page: true
    });

    table.on('tool(test)', function(obj){
      row = obj.data;
      console.log(obj);
      if(obj.event === 'del'){
        layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
          $.ajax({
            url: '../singer/deleteInit/'+row.singerid,
            type: "post",
            success: function() {
              obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
              layer.close(index);
              console.log(index);
              layer.msg("删除成功", {
                icon: 1
              });
            }
          });
          layer.close(index);
        });
      } else if(obj.event === 'edit') {
        layer.open({
          type: 2,
          title: "更新资料",
          area: ['660px', '460px'],
          skin: 'layui-layer-rim',
          content: '../singer/updateInit/' + row.singerid,
          success: function (index, layero) {
            $.post('../singer/updateInit/' + row.singerid, function (rs) {
              if (rs.code === "0") {
                // 提示操作成功
                layer.msg("操作成功", {
                  icon: 1,
                });
                // 调用查询方法刷新数据
                query();
                layer.closeAll();
              } else {
                layer.msg("保存失败！");
              }
            }, 'json');
          },
        });
      }
      else{
        add('新增');
      }
    });
  }
</script>
</body>
</html>
